// 基于axios封装网络请求
// 想法不同，封装的地方和名字都不一样，但是思想相同

import theAxios from 'axios'
import router from '../router/index'
import { Notify } from 'vant'
import { getToken, removeToken } from './token'

const axios = theAxios.create({
  baseURL: 'http://toutiao.itheima.net',
  timeout: 20000 // 20秒超时判定响应无效
})
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 目标:统一携带token
  // 判断本地有token再携带，判断具体api/index.js里如果没有携带Authorization，我再添加
  // ?.可选链操作符，如果前面的对象没有length整个表达式原地返回undefined
  // getToken()原地有值才调用length
  // @ts-ignore
  if (getToken()?.length > 0 && config.headers.Authorization === undefined) {
    // @ts-ignore
    config.headers.Authorization = `Bearer ${getToken()}`
  }
  // console.log(config)
  return config
}, function (error) {
  // http 响应状态码为2xx，3xx进入该函数
  // 对请求错误做什么
  return Promise.reject(error)
})
// 添加响应拦截器
// 本质上是一个函数
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // http 响应状态码为4xx，5xx报错进入该函数
  // 对响应数据错误做什么
  console.dir(error)
  // 该项目只有401才代表身份过期
  if (error.response.status === 401) {
    // this.$router.push不能使用，没有this
    // 解决方法，直接引入router的js路由文件
    Notify({ type: 'warning', message: '身份过期或错误' })
    removeToken()
    router.replace('/login')
  }
  return Promise.reject(error)
})

export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
  return axios({
    url,
    method,
    params,
    data,
    headers
  })
}

// 但是上面方法有局限
// 导出的axios方法使用时
/* 逻辑页面请求调用时，传入这5个配置项
    axios({
        url:'请求地址',
        method:'请求方式',
        params:'',
        data:'',
        headers:''
    })
*/

// 问题：将来我要更新request.js里封装网络请求工具 ---解决如上：传参赋值
// 把axios换成jquery的$.ajax
// import $ from 'jquery'
// export default $.ajax
/*
    $.ajax({
        url:'请求地址',
        type:'请求方式',
        data:'',
        headers:''
    })
*/
